<template>
    <div>
        <!--          面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>帖子分类管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片区域-->
        <el-card class="box-card">
            <el-row :gutter="20" >
                <el-col :span="1.5">
                    <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAdd"
                    >新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            :disabled="multiple"
                            @click="handleDelete"
                    >删除</el-button>
                </el-col>
            </el-row>

            <el-table v-loading="loading" :data="classificationList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
<!--                <el-table-column label="id" align="center" prop="id" />-->
                <el-table-column label="类别" align="center" prop="className" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                        >修改</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加或修改帖子分类对话框 -->
            <el-dialog :visible.sync="visible" width="500px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="分类名称" prop="className">
                        <el-input v-model="form.className" placeholder="请输入分类名称" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Classification",
        data() {
            return {
                //测评表
                filedList: [],
                open2: false,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 帖子分类表格数据
                classificationList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                visible: false,
                // 查询参数
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询帖子分类列表 */
            async getList() {
                this.loading = true;
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                const {data: response} = await this.$http.get('classification/list');
                this.classificationList = response.data;
                this.loading = false;
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    className: null
                };
                // this.$refs['elForm'].resetFields();
                // this.resetForm("form");
            },
            // 取消按钮
            cancel() {
                this.visible = false;
                this.reset();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.visible = true;
                this.title = "添加帖子分类";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                this.$http.get('classification/'+ id).then(response => {
                    this.form = response.data.data;
                    this.title = "修改帖子分类";
                    this.visible = true;
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    console.log(this.form.id);
                    console.log(this.form.className);
                    if (valid) {
                        if (this.form.id != null) {
                            const token = sessionStorage.getItem("token");
                            this.$http.defaults.headers.common['Authorization'] = token;
                            this.$http.put('classification',this.form).then(response => {
                                console.log(response)
                                if (response.data.code === 200) {
                                    this.$message({showClose: true, message: "修改成功", type: "success"})
                                    this.visible = false;
                                    this.getList();
                                }
                            });
                        } else {
                            const token = sessionStorage.getItem("token");
                            this.$http.defaults.headers.common['Authorization'] = token;
                            this.$http.post('classification',this.form).then(response => {
                                if (response.data.code === 200) {
                                    this.$message({ showClose: true, message: "新增成功", type: "success" })
                                    // this.msgSuccess("新增成功");
                                    this.visible = false;
                                    this.getList();
                                }
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除帖子分类编号为"' + ids + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async () => {
                    this.$http.delete(`classification/`+ids).then(response => {
                        if (response.data.code == 200) {
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: response.data.code
                            });
                        }
                    });
                }).catch(() => {

                });
            }
        }
    };
</script>
<style>
    .el-breadcrumb{
        margin-bottom: 12px;

    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    }

</style>
<style>
    .el-breadcrumb{
        margin-bottom: 12px;

    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    }
</style>
